{% extends 'base.html' %}
{% block content %}

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Blog</li>
  </ol>
</nav>

<h1>This is blog list page</h1>

{% for post in blogpost_list %}
<div class="card mb-4{% if not post.is_published %} border-warning{% endif %}">
  <div class="card-body">
    <h5 class="card-title">{{ post.title }}</h5>
    <p class="card-text">{{ post.content }}</p>
    <a href="{{ post.get_absolute_url }}" class="btn btn-primary btn-sm">more</a>
  </div>
</div>
{% endfor %}

{% if is_paginated %}
<div class="row">
  <div class="col-12">
    <nav aria-label="Page navigation example" class="text-center">
      <ul class="pagination">
        {% if page_obj.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        {% else %}
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1" aria-disabled="true">&laquo;</a>
        </li>
        {% endif %}

        {% for i in paginator.page_range %}
        {% if page_obj.number == i %}
        <li class="page-item active" aria-current="page">
          <span class="page-link">
            {{i}}
            <span class="sr-only">(current)</span>
          </span>
        </li>
        {% else %}
        <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a></li>
        {% endif %}
        {% endfor %}


        {% if page_obj.has_next %}
        <li class="page-item">
          <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
        {% else %}
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1" aria-disabled="true">&raquo;</a>
        </li>
        {% endif %}
      </ul>
    </nav>
  </div>
</div>
{% endif %}

{% endblock content %}